<template>
  <div class="app">
    <el-container>
      <el-aside
        class="app-side app-side-left"
        :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'"
      >
        <div class="app-side-logo">
          <img :src="isCollapse?logo_small:logo" :width="isCollapse ? '60' : '102'" :height="isCollapse ? '60' : '52'" :style="isCollapse ? '' : 'margin-top:5px'" />
        </div>
          <!-- 加载菜单 -->
          <div>
         <left-nav :isCollapse="isCollapse" />
          </div>
      </el-aside>

      <el-container
      :class="isCollapse ?'app-container-collapsed':'app-container-expanded'">
        <el-header class="app-header">
          <div style="width: 60px; cursor: pointer;" @click.prevent="toggleSideBar">
            <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
            <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>
          </div>
          <!-- 我是头顶菜单 -->
          <top-nav/>

          <!--我是用户面板-->
          <user-panel/>


        </el-header>

        <el-main class="app-body">
           <right-tabs/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LeftNav from "@/components/LeftNav";
import RightTabs from "@/components/RightTabs";
import TopNav from "@/components/TopNav";
import UserPanel from "@/components/UserPanel";
import { mapState } from 'vuex'
export default {
  name: "Container",
  data() {
    return {
      isCollapse: false,
      logo:require('@/assets/logo.png'),
      logo_small:require('@/assets/logo_small.png')
    };
  },
  components: {
    RightTabs,
    LeftNav,
    TopNav,
    UserPanel
  },
  computed: {
    ...mapState({
    })
    }
  ,
  methods: {
    toggleSideBar() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
};
</script>

<style>
</style>
